<template>
  <v-container class="mt-12">
    <v-card elevation="0">
      <v-card-title class="justify-center headline mt-10">你都如何回忆我？</v-card-title>
      <v-card-text>
        <v-form
          ref="form"
          lazy-validation
        >
          <v-row>
            <v-col>
              <v-text-field
                v-model="netName"
                solo
                prepend-icon="mdi-account-box-outline"
                :counter="128"
                :rules="filedRules.netName"
                label="网名"
                required
              />
            </v-col>
            <v-col>
              <v-text-field
                v-model="email"
                solo
                prepend-icon="mdi-email-outline"
                :rules="filedRules.email"
                label="邮箱"
                required
              />
            </v-col>
            <v-col>
              <v-text-field
                v-model="friendLink"
                solo
                prepend-icon="mdi-link-variant"
                :counter="1024"
                :rules="filedRules.friendLink"
                label="友链地址"
                required
              />
            </v-col>
          </v-row>
          <v-row>
            <v-col>
              <v-textarea
                v-model="messages"
                solo
                :auto-grow="false"
                :rules="filedRules.messages"
                rows="5"
                rounded
                prepend-icon="mdi-message-draw"
                filled
                background-color="light-blue lighten-5"
              />
              <v-row>
                <v-col>
                  <v-btn block dark color="blue" class="aligin-center" @click="resetMessage">
                    重置
                  </v-btn>
                </v-col>
                <v-col>
                  <v-btn block dark color="green" class="aligin-center" @click="submitMessage">
                    提交
                  </v-btn>
                </v-col>
              </v-row>

            </v-col>
          </v-row>
        </v-form>
      </v-card-text>
      <v-card-text class="message-title">
        所有留言：
        <v-divider class="mt-4" />
        <v-list three-line dense>
          <template v-for="(item, index) in messageList" v-if="messageList.length>0">
            <v-list-item
              :key="index"
            >
              <v-list-item-avatar>
                <v-img
                  v-if="item.avatar ===null || item.avatar === undefined"
                  src="http://119.23.10.3:8018/group1/M00/00/00/rBIUS1-BXsOAeA1jAAAhIDW5dXQ408.jpg"
                />
                <v-img v-else :src="item.avatar" />
              </v-list-item-avatar>

              <v-list-item-content>
                <v-list-item-title class="text-left no-break">{{ item.content }}</v-list-item-title>
                <v-list-item-subtitle class="text-right">
                  <span class="font-weight-bold">{{ item.netName }}</span>
                  <span class="text--secondary ml-2">{{ item.coordinate }}</span>
                  <span class="font-weight-thin ml-2">{{ item.createTime | dateformat('YYYY-MM-DD HH:mm:ss') }}</span>
                </v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>
            <v-divider :inset="inset" />
          </template>
          <template v-else>
            <v-card elevation="0">
              <v-card-subtitle>
                什么留言都没有，踩一下吧...
              </v-card-subtitle>
            </v-card>
          </template>
        </v-list>
      </v-card-text>
      <v-card-actions>
        <el-pagination
          v-if="messageList.length > 0"
          :current-page="current"
          :page-size="pageSize"
          :page-sizes="[10,20,30]"
          layout="total, sizes ,prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </v-card-actions>

    </v-card>
  </v-container>
</template>

<script>
import '@/assets/css/business/messageBoard/messageBoard.scss'
import { getMessageBoardList, leaveMessage } from '@/api/messageboard'

export default {
  name: 'messageBoard',
  data: () => ({
    messages: '',
    messageList: [],
    inset: true,
    current: 1, // 初始时是第几页
    size: 0, // 当前总共有多少页，根据后台回传的参数计算
    pageSize: 10, // 一页需要展示多少条留言
    total: 0, // 总数
    pages: 0, // 总页数
    netName: '',
    email: '',
    friendLink: '',
    filedRules: {
      netName: [
        v => !!v || '请填写您的大名',
        v => (v && v.length <= 128) || '名字不要超过 128 位'
      ],
      email: [
        v => !!v || '请填写您的邮件',
        v => /.+@.+\..+/.test(v) || '邮件格式错误'
      ],
      friendLink: [
        v => (v && v.length > 0 <= 1024) || '友链别超过1024个字符啊'
      ],
      messages: [
        v => !!v || '咳咳，讲两句再提交吧',
        v => (v && v.length <= 4096) || '请不要写作文，最大长度4096'
      ]
    }
  }),
  created() {
    this.getMessageBoardList()
  },
  methods: {
    // 页面尺寸变更
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getMessageBoardList()
    },
    // 改变当前页
    handleCurrentChange(current) {
      this.current = current
      this.getMessageBoardList()
    },
    // 设置分页属性
    setPaginations(page) {
      this.current = page.current
      this.total = page.total
      this.pageSize = page.size
      this.pages = page.pages
    },
    getMessageBoardList() {
      const params = {
        current: this.current,
        pageSize: this.pageSize
      }
      getMessageBoardList(params)
        .then((res) => {
          const resultData = res.data
          if (res && res.code === 200) {
            this.messageList = []
            this.messageList.push(...resultData.records)
            this.setPaginations(resultData)
          }
        })
        .catch(err => {
          this.$iziToast.error({ message: err.message })
        })
    },
    resetMessage() {
      this.$refs.form.reset()
    },
    submitMessage() {
      const valid = this.$refs.form.validate()
      if (valid) {
        const params = {
          netName: this.netName,
          content: this.messages,
          email: this.email,
          friendLink: this.friendLink
        }
        leaveMessage(params)
          .then((res) => {
            if (res && res.code === 200) {
              this.$refs.form.reset()
              this.getMessageBoardList()
              this.$iziToast.success({ message: res.msg })
            }
          })
          .catch(err => {
            this.$iziToast.error({ message: err.message })
          })
      }
    }
  }
}
</script>

<style scoped>

</style>
